<template>
  <div>
    <v-card class="mx-5 my-0" flat>
      <v-row no-gutters class="">
        <v-col
          cols="auto"
          class="pt-4 ml-4"
          v-if="!this.$vuetify.breakpoint.smAndDown"
        >
          <v-avatar size="32">
            <v-img
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=823977627,2892090821&fm=11&gp=0.jpg"
            ></v-img>
          </v-avatar>
        </v-col>
        <v-col>
          <v-col class="pa-0">
            <SubPublish :placeholder="'输入评论...'" :index="'talk-'+id" :fstaus="false"/>
          </v-col>
          <v-col class="pb-0" v-for="(item, index) in commentList" :key="index">
            <Comment :cmt="item" />
          </v-col>
        </v-col>
      </v-row>
    </v-card>

    <v-row no-gutters v-if="need_more" >
      <v-btn block depressed text tile >
        <nuxt-link to="/talkdetail" class="blue--text text-accent-3 text-decoration-none">查看更多 > </nuxt-link>
      </v-btn>
    </v-row>
  </div>
</template>

<script>
import SubPublish from '~/components/mistalk/SubPublish'
import Comment from '~/components/mistalk/Comment'

export default {
  components: { SubPublish, Comment },
  props: {
    id: String,
    need_more: Number,
  },
  data: () => ({
    commentList: [
      {
        id: 1,
        user_id: 1,
        username: '一家之主',
        sign: '',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F25%2F20200325142736_cysee.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=bebbf00c0ed2b006c1669cf136786dd3',
        content: 'pb加油😏',
        time: '13分钟前',
        is_thumb_up: 0,
        reply_username: '杭州_阿里嘎巴创始人',
        reply_id: 3,
        subcomment_list: [],
      },
      {
        id: 2,
        user_id: 2,
        username: '头文字D80',
        sign: '切图仔',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F26%2F20200426233146_YyeVE.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=a761c97a6fb6c4dbe2dbf5a36c03df8b',
        content: 'vue不属于h5吗？',
        time: '54分钟前',
        is_thumb_up: 0,
        reply_username: '杭州_阿里嘎巴创始人',
        reply_id: 3,
        subcomment_list: [
          {
            id: 3,
            user_id: 3,
            username: '杭州_阿里嘎巴创始人',
            sign: '切图仔',
            avatar:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=823977627,2892090821&fm=11&gp=0.jpg',
            content: '说的没毛病',
            time: '49分钟前',
            is_thumb_up: 0,
            reply_username: '头文字D80',
            reply_id: 2,
          },
        ],
      },
      {
        id: 4,
        user_id: 4,
        username: 'channel',
        sign: 'Web前端开发',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F12%2F20200212105225_ynliq.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=f59c6b61c11bff8da481048daa1a6e05',
        content: '在哪接的私活呢',
        time: '4小时前',
        is_thumb_up: 0,
        reply_username: '杭州_阿里嘎巴创始人',
        reply_id: 3,
        subcomment_list: [
          {
            id: 5,
            user_id: 3,
            username: '杭州_阿里嘎巴创始人',
            sign: '码仔@阿里嘎巴创始人',
            avatar:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=823977627,2892090821&fm=11&gp=0.jpg',
            content: '那就要看人脉了',
            time: '4小时前',
            is_thumb_up: 0,
            reply_username: 'channel',
            reply_id: 4,
          },
          {
            id: 6,
            user_id: 5,
            username: '优秀的打字员_大黑铁',
            sign: '程序猿',
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F23%2F20200323151848_pcehw.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=9a6093462a72627d79027ad4257d3adc',
            content: '难道你不算我们掘金的xd嘛',
            time: '4小时前',
            is_thumb_up: 0,
            reply_username: '杭州_阿里嘎巴创始人',
            reply_id: 3,
          },
          {
            id: 7,
            user_id: 3,
            username: '杭州_阿里嘎巴创始人',
            sign: '码仔@阿里嘎巴创始人',
            avatar:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=823977627,2892090821&fm=11&gp=0.jpg',
            content: '好家伙，我直接就好家伙',
            time: '4小时前',
            is_thumb_up: 0,
            reply_username: '优秀的打字员_大黑铁',
            reply_id: 5,
          },
        ],
      },
      {
        id: 8,
        user_id: 7,
        username: 'along_with',
        sign: '@ 帕拉迪岛',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F23%2F20200323151847_pnshj.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=6beb1f0cdfe540e816ad466b7fa9a5eb',
        content: 'pb加油😏',
        time: '13分钟前',
        is_thumb_up: 0,
        reply_username: '拔剑吧少年',
        reply_id: 3,
        subcomment_list: [],
      },
      {
        id: 9,
        user_id: 8,
        username: '科技男',
        sign: '前端工程师 @ 未知数',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F15%2F20200415183654_fwunn.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=698acd7ee1ed1be63b9717ddd48980f6',
        content: 'pb加油😏',
        time: '13分钟前',
        is_thumb_up: 0,
        reply_username: '拔剑吧少年',
        reply_id: 3,
        subcomment_list: [],
      },
      {
        id: 10,
        user_id: 9,
        username: '章胖胖',
        sign: '白嫖工程师 @ 宁波某公司',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F15%2F20200415183919_snrly.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617704439&t=94a532923e99b91cc07b371e4519e7c8',
        content: 'pb加油😏',
        time: '13分钟前',
        is_thumb_up: 0,
        reply_username: '拔剑吧少年',
        reply_id: 3,
        subcomment_list: [],
      },
      // {
      //   id: 11,
      //   user_id: 10,
      //   username: 'Montos',
      //   sign: '哈哈大师 @ 菜鸡后端',
      //   avatar:
      //     'https://wx2.sinaimg.cn/mw690/0080cDFNly1gn176w1wpxj30yi1jd47p.jpg',
      //   content: 'pb加油😏',
      //   time: '13分钟前',
      //   is_thumb_up: 0,
      //   reply_username: '拔剑吧少年',
      //   reply_id: 3,
      //   subcomment_list: [],
      // },
      // {
      //   id: 12,
      //   user_id: 11,
      //   username: 'JustCompThin',
      //   sign: 'iOS开发工程师 @ 开发宇宙指',
      //   avatar:
      //     'https://wx1.sinaimg.cn/mw690/0080cDFNly1gn91b50c57j30yi0y746q.jpg',
      //   content: 'pb加油😏',
      //   time: '13分钟前',
      //   is_thumb_up: 0,
      //   reply_username: '拔剑吧少年',
      //   reply_id: 3,
      //   subcomment_list: [],
      // },
      // {
      //   id: 13,
      //   user_id: 12,
      //   username: '艺术就是_派大星',
      //   sign: '小程序+vue @ 哇啦',
      //   avatar:
      //     'https://wx3.sinaimg.cn/mw690/0080cDFNly1gn7s09r95lj30yi19y7dh.jpg',
      //   content: 'pb加油😏',
      //   time: '13分钟前',
      //   is_thumb_up: 0,
      //   reply_username: '拔剑吧少年',
      //   reply_id: 3,
      //   subcomment_list: [],
      // },
      // {
      //   id: 14,
      //   user_id: 13,
      //   username: '慢热i',
      //   sign: '前端切图工具人',
      //   avatar:
      //     'https://wx2.sinaimg.cn/mw690/0080cDFNly1gn65mxt0dhj31jk2234qp.jpg',
      //   content: 'pb加油😏',
      //   time: '13分钟前',
      //   is_thumb_up: 0,
      //   reply_username: '拔剑吧少年',
      //   reply_id: 3,
      //   subcomment_list: [],
      // },
    ],
  }),
}
</script>

<style></style>
